<template>
  <n-flex vertical>
    <n-grid cols="10" item-responsive :x-gap="12">
      <n-affix :top="0" :trigger-top="90" position="absolute" :listen-to="() => containerRef">
        <n-grid-item :span="6" :offset="1">

          <div>
            <TopMenu />
          </div>
        </n-grid-item>
      </n-affix>
    </n-grid>
    <n-grid cols="10" item-responsive :x-gap="12" style="background-color: #f1f1f1 ; padding-top: 20px;">
      <n-grid-item :span="6" :offset="1">
        <div ref="containerRef">
          <RouterView />
        </div>
      </n-grid-item>
      <n-grid-item :span="2">
        <div>
          2
        </div>
      </n-grid-item>
    </n-grid>
  </n-flex>
</template>

<style scoped></style>

<script setup lang="ts">
import TopMenu from '@/components/menu/TopMenu.vue'
import { NFlex } from 'naive-ui';
import { RouterView } from 'vue-router'
import { ref } from 'vue'
const containerRef = ref<HTMLElement | undefined>(undefined)
</script>
